<template>
  <div>
    
    <div class="table margin-top padding-bottom">
      <div class="list" v-for="l in data" :key='l.id'>
		  <h1>套餐内容</h1>
		  <p>获得<input type="text" v-model="l.goldNumber"  value="10">个金币</p>
		  <p>价格：<input type="text" v-model="l.price"  value="10">元 </p>
		   <el-button type="primary" @click="che1(l.id)">修改</el-button>
	  </div>
	 
	  <!-- <el-button @click="cancel" style='margin-top: 20px;display: block;'>返回</el-button> -->
    </div>
  </div>
</template>

<script>
import {goldList,updateGold } from '@/api/api'
export default {
  data() {
    return {
		readonlys:true,
		data:[]
    }
  },
  created() {
    this.getList()
  },
  methods: {
	  // 返回
	  cancel() {
	    this.$router.back()
	  },
	  che1(id){
		  var deft;
		 for(var i=0;i<this.data.length;i++){
			 if(id==this.data[i].id){
				 deft=this.data[i]
			 }
			
		 }
		 updateGold(deft).then(data => {
		 			  if(data.code == 200){
		 				   Is.tip('编辑成功', 2000, 'success')
		 			  }
		 })
	  },
	  getList(){
		  
		  goldList().then(data => {
			  if(data.code == 200){
				  this.data=data.data
			  }
		  })
	  },
  }}
</script>

<style lang="scss" scoped>
	.list{
		display: inline-block;
		vertical-align: middle;
		width: auto;
		margin-right: 30px;
		margin-top: 30px;
		h1{
			font-size: 18px;
			color: #333;
		}
		p{
			font-size: 16px;
			color: #333;
			margin-top: 15px;
			input{
				width: 40px;
				height: 40px;
				font-size: 16px;
				color: #333;
				outline: none;
				text-align: center;
				margin-left: 8px;
				margin-right: 8px;
			}
			a{
				display: inline-block;
				width: 50px;
				height: 40px;
				    color: #333;
					border: 1px solid #ddd;
				    background-color: #fff;
				    border-color: #ddd;
					text-align: center;
					vertical-align: middle;
					line-height: 40px;
					margin-left: 15px;
					border-radius: 10px;
			}
		}
	}
</style>
